<template>
  <div class="container-content">
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        size="small"
        label-width="100px"
        :disabled="true"
      >
        <el-row :gutter="15" style="padding-right: 50px">
          <el-col :span="8">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="票据(包)号"
                  prop="billPackNo"
                >
                  <el-input
                    v-model="formData.billPackNo"
                    placeholder="请输入票据(包)号"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="票据号码"
                  prop="billSerialNumber"
                >
                  <el-input
                    v-model="formData.billSerialNumber"
                    clearable
                    :style="{
                      width: '100%',
                      fontSize: '12px',
                    }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="票据类型"
                  prop="billType"
                >
                  <el-select
                    v-model="formData.billType"
                    placeholder="请选择票据类型"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in billTypeOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="子票据开始序号"
                  prop="subBillStartIndex"
                >
                  <el-input
                    v-model="formData.subBillStartIndex"
                    placeholder="请输入子票据开始序号"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="子票据终止序号"
                  prop="subBillEndIndex"
                >
                  <el-input
                    v-model="formData.subBillEndIndex"
                    placeholder="请输入子票据终止序号"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="付款单位"
                  prop="payDeptId"
                >
                  <el-input
                    v-model="formData.payDeptId"
                    placeholder="请输入付款单位"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="付款单位类型"
                  prop="payDeptType"
                >
                  <el-input
                    v-model="formData.payDeptType"
                    placeholder="请输入付款单位类型"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="付款期限"
                  prop="payTerm"
                >
                  <el-input
                    v-model="formData.payTerm"
                    placeholder="请输入付款期限"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="销售组织"
                  prop="saleDeptId"
                >
                  <el-input
                    v-model="formData.saleDeptId"
                    placeholder="请输入销售组织"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="承兑协议编号"
                  prop="acceptanceNumber"
                >
                  <el-input
                    v-model="formData.acceptanceNumber"
                    placeholder="请输入承兑协议编号"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="承兑日期"
                  prop="acceptanceTime"
                >
                  <el-date-picker
                    v-model="formData.acceptanceTime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }"
                    placeholder="请输入承兑日期"
                    clearable
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="承兑人"
                  prop="acceptanceUser"
                >
                  <el-input
                    v-model="formData.acceptanceUser"
                    placeholder="请输入承兑人"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="出票人"
                  prop="ticketingUser"
                >
                  <el-input
                    v-model="formData.ticketingUser"
                    placeholder="请输入出票人"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="签发日"
                  prop="issuanceTime"
                >
                  <el-date-picker
                    v-model="formData.issuanceTime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }"
                    placeholder="请选择签发日"
                    clearable
                  ></el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label-width="160px" label="到期日" prop="dueTime">
                  <el-date-picker
                    v-model="formData.dueTime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }"
                    placeholder="请选择到期日"
                    clearable
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="收票日"
                  prop="receiveTime"
                >
                  <el-date-picker
                    v-model="formData.receiveTime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }"
                    placeholder="请选择收票日"
                    clearable
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="结算组织"
                  prop="settlementDeptId"
                >
                  <el-input
                    v-model="formData.settlementDeptId"
                    placeholder="请输入结算组织"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="票面金额"
                  prop="faceAmount"
                >
                  <el-input
                    v-model="formData.faceAmount"
                    placeholder="请输入票面金额"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="交易金额"
                  prop="transactionAmount"
                >
                  <el-input
                    v-model="formData.transactionAmount"
                    placeholder="请输入交易金额"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="票面利率"
                  prop="faceRate	"
                >
                  <el-input
                    v-model="formData.faceRate"
                    placeholder="请输入票面利率"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="是否支持拆分"
                  prop="isSplit"
                >
                  <el-radio-group v-model="formData.isSplit" size="medium">
                    <el-radio
                      v-for="(item, index) in isSplitOptions"
                      :key="index"
                      :label="item.value"
                      :disabled="item.disabled"
                      >{{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="等分化票据"
                  prop="isSeparate"
                >
                  <el-radio-group v-model="formData.isSeparate" size="medium">
                    <el-radio
                      v-for="(item, index) in isSeparateOptions"
                      :key="index"
                      :label="item.value"
                      :disabled="item.disabled"
                      >{{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="币别"
                  prop="kingBaseCurrencyId"
                >
                  <el-select
                    v-model="formData.kingBaseCurrencyId"
                    placeholder="请选择币别"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in kingBaseCurrencyIdOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="数据状态"
                  prop="dataStatus"
                >
                  <el-select
                    v-model="formData.dataStatus"
                    placeholder="请选择数据状态"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in dataStatusOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label-width="160px"
                  label="	结算状态"
                  prop="settlementStatus"
                >
                  <el-select
                    v-model="formData.settlementStatus"
                    placeholder="请选择结算状态"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in settlementStatusOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <el-divider></el-divider>
      <el-button type="text" @click="add">新增行</el-button>
      <el-button type="text" @click="del">删除行</el-button>
      <span
        v-if="showCheck"
        style="color: red; font-size: 12px; margin-left: 20px"
        >拆分金额已超出总金额，请检查</span
      >
      <el-table :data="splitEntities" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="billSerialNumber"
          label="票据号码"
        ></el-table-column>
        <el-table-column prop="faceAmount" label="金额">
          <template slot-scope="scope">
            <el-input
              @change="onAmountChange(scope.row, scope.$index)"
              v-model="scope.row.faceAmount"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column
          prop="subBillStartIndex"
          label="子票据开始序号"
        ></el-table-column>
        <el-table-column
          prop="subBillEndIndex"
          label="子票据终止序号"
        ></el-table-column>
        <el-table-column
          prop="subPackInterval"
          width="200"
          label="子票据区间号"
        ></el-table-column>
        <el-table-column
          prop="subBillNumber"
          label="子票据包数量"
        ></el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>
import { splitInfo, getDetail } from "@/api/finance/receivebill";
export default {
  props: ["rowId"],
  data() {
    return {
      formData: {
        acceptanceNumber: "",
        actualMoney: "",
        billSerialNumber: "",
        baseCurrencyId: "",
        billNo: "",
        billSerialNo: "",
        billType: "",
        bondAccount: "",
        bondPayMoney: "",
        costMoney: "",
        createBy: "",
        createTime: "",
        currentPayFaceMoney: "",
        dataStatus: "",
        docTypeCode: "",
        faceMoney: "",
        generalAccount: "",
        generalPayMoney: "",
        id: "",
        interest: "",

        ownBaseCurrencyId: "",
        params: {},
        payBankId: "",
        payBillId: "",
        payDeptId: "",
        payId: "",
        payTime: "",
        rate: "",
        rateType: "",
        remark: "",
        remarks: "",
        searchValue: "",
        settlementNo: "",
        sourceNo: "",
        sourceType: "",
        transactionCompanyId: "",
        transactionCompanyType: "",
        unpaidFaceMoney: "",
        updateBy: "",
        updateTime: "",
      },
      splitEntities: [],
      rowList: [],
      index: 0,
      showCheck: false,
      billTypeOptions: [
        {
          label: "test",
          value: 1,
        },
      ],
      kingBaseCurrencyIdOptions: [],
      dataStatusOptions: [
        {
          label: "创建",
          value: 1,
        },
        {
          label: "审核中",
          value: 2,
        },
        {
          label: "已审核",
          value: 3,
        },
      ],
      receiptDeptTypeOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      settlementStatusOptions: [
        {
          label: "为空",
          value: 1,
        },
        {
          label: "到期付款",
          value: 2,
        },
        {
          label: "退票",
          value: 3,
        },
      ],
      acceptanceBankIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      transactionCompanyTypeOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      isSeparateOptions: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 2,
        },
      ],
      isSplitOptions: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 2,
        },
      ],
    };
  },
  methods: {
    submit(cb) {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        const params = {
          kingFinanceReceiptBillEntities: this.splitEntities,
          kingFinanceReceiptBillEntity: {
            id: this.formData.id,
          },
        };
        splitInfo(params).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "操作成功！",
              type: "success",
            });
            cb();
          }
        });
      });
    },
    add() {
      let params = {
        billSerialNumber: "",
        subPackInterval: "",
        subBillStartIndex: "",
        subBillEndIndex: "",
        subBillNumber: "",
        // transactionAmount: "",
        faceAmount: "",
        index: this.index,
      };
      this.index++;
      this.splitEntities.push(params);
    },
    del() {
      this.splitEntities = this.splitEntities.filter((e) => {
        return !this.rowList.some((item) => item.index === e.index);
      });
      this.onAmountChange();
    },
    handleSelectionChange(val) {
      this.rowList = val;
    },
    onAmountChange() {
      const allCount = this.splitEntities.reduce((prev, next) => {
        return prev + next.faceAmount * 1;
      }, 0);
      if (allCount > this.formData.faceAmount * 1) {
        this.showCheck = true;
      } else {
        this.showCheck = false;
      }
      let parmas = {};
      let count = 0;
      let start = 1;
      let subBillEndIndex = 0;
      let billSerialNumber = 0;
      this.splitEntities.forEach((row, i) => {
        if (row.faceAmount) {
          count += row.faceAmount * 1;
          if (i === 0) {
            subBillEndIndex = row.faceAmount * 100;
            billSerialNumber =
              this.formData.billPackNo + "-" + 1 + "-" + row.faceAmount * 100;
          } else {
            subBillEndIndex = count * 100;
            billSerialNumber =
              this.formData.billPackNo + "-" + start + "-" + count * 100;
          }
          parmas = {
            billSerialNumber,
            subPackInterval: start + "-" + count * 100,
            subBillStartIndex: start,
            subBillEndIndex,
            subBillNumber: row.faceAmount * 100,
            // transactionAmount: row.transactionAmount * 1,
            faceAmount: row.faceAmount * 1,
            index: row.index,
          };
          start += subBillEndIndex;
          this.$set(this.splitEntities, i, parmas);
        }
      });
    },
  },
  mounted() {
    if (this.rowId) {
      getDetail(this.rowId).then((res) => {
        if (res.code === 200) {
          this.formData = {
            ...this.formData,
            ...res.data.kingFinanceReceiptBillEntity,
          };
          this.formData.subBillEndIndex = this.formData.subBillEndIndex * 100;
          this.formData.billSerialNumber =
            this.formData.billPackNo +
            "-" +
            this.formData.subBillStartIndex +
            "-" +
            this.formData.subBillEndIndex * 100;
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.divider {
  margin: 0;
}
</style>
